<script>
import { reactive, toRefs, ref } from "vue";
export default {
  props: {
    tableData: { type: Object, default: {} }, //表格数据
    tableLabel: { type: Array, default: [] }, //表头标签列表
    mapLabel: { type: Object, default: {} }, //字段-标签映射关系列表  {name:'姓名', class:'班级'， ...}
    formDataPost: { type: Array, default: [] }, //增加对话框标签列表
    formDataPut: { type: Array, default: [] }, //修改查对话框标签列表
    formDataGet: { type: Array, default: [] }, //查询对话框标签列表
    total: { type: Number, default: 0 }, //数据总数
    pageSize: { type: Number, default: 10 }, //单页大小
    Upload: { type: Boolean, default: false }, //导入按钮是否启用
    Download: { type: Boolean, default: false }, //导出按钮是否启用
    deleteButton: { type: Boolean, default: false }, //删除按钮是否启用
    deleteAll: { type: Boolean, default: false }, //批量删除是否启用
  },
  emits: [
    "postTableData", //增加
    "deleteTableData", //删除
    "putTableData", //修改
    "getTableData", //查询
    "deleteAllTableData", // 批量删除
    "handleUpload", //导入
    "handleDownload", //导出
  ],
  /**
   * postTableData      (form: object) => void
   * deleteTableData    (row: object) => void
   * putTableData       (row: object, form: object) => void
   * getTableData       (currentPage: number, queryKey: string) => void
   * deleteAllTableData (rows: array) => void
   * handleUpload       () => void
   * handleDownload     () => void
   */

  setup(props, { emit }) {
    const tableRef = ref();
    const state = reactive({
      dialogVisible: false,
      queryKey: "",
      dialogTitle: "",
      rowEdit: null,
      dialogFormData: null,
      currentPage: 1,
    });

    //对话框 添加
    const handlePlus = () => {
      state.dialogFormData = {};
      props.formDataPost.forEach((key) => {
        state.dialogFormData[key] = "";
      });
      for (let key in state.dialogFormData) {
        state.dialogFormData[key] = "";
      }
      state.dialogTitle = "添加";
      state.dialogVisible = true;
    };

    //添加数据
    const handleAdd = () => {
      emit("postTableData", state.dialogFormData);
    };

    //批量删除数据
    const handleDeleteAll = () => {
      const SelectionRows = tableRef.value.getSelectionRows();
      emit("deleteAllTableData", SelectionRows);
    };

    //导入
    const handleUpload = () => {
      emit("handleUpload", state.SelectionRows);
    };

    //导出
    const handleDownload = () => {
      emit("handleDownload");
    };

    //模糊查询
    const handleSearch = () => {
      state.currentPage = 1;
      emit("getTableData", state.currentPage, state.queryKey);
    };

    const handleShow = (index, row) => {
      state.dialogFormData = {};
      props.formDataGet.forEach((key) => {
        state.dialogFormData[key] = "";
      });
      for (let key in state.dialogFormData) {
        state.dialogFormData[key] = row[key];
      }
      state.dialogTitle = "查看";
      state.dialogVisible = true;
    };

    const handleEdit = (index, row) => {
      state.dialogFormData = {};
      props.formDataPost.forEach((key) => {
        state.dialogFormData[key] = "";
      });
      for (let key in state.dialogFormData) {
        state.dialogFormData[key] = row[key];
      }
      state.dialogTitle = "编辑";
      state.dialogVisible = true;
      state.rowEdit = row;
    };

    const handleEditConfirm = () => {
      emit("putTableData", state.rowEdit, state.dialogFormData);
    };

    const handleDelete = (index, row) => {
      emit("deleteTableData", row);
    };

    const changePage = (val) => {
      state.currentPage = val;
      emit("getTableData", state.currentPage, state.queryKey);
    };

    return {
      ...toRefs(state),
      tableRef,
      handlePlus,
      handleAdd,
      handleDelete,
      handleUpload,
      handleDownload,
      handleSearch,
      changePage,
      handleShow,
      handleEdit,
      handleDeleteAll,
      handleEditConfirm,
    };
  },
};
</script>

<template>
  <div class="query-container">
    <div>
      <el-input class="query-input" placeholder="关键词" v-model="queryKey" />
      <el-button type="primary" @click="handleSearch()">
        <el-icon><el-icon-search /></el-icon>
      </el-button>
    </div>
    <div>
      <el-button color="#626aef" v-if="Upload" @click="handleUpload()">
        <el-icon><el-icon-upload /></el-icon>
      </el-button>
      <el-button color="#626aef" v-if="Download" @click="handleDownload()">
        <el-icon><el-icon-download /></el-icon>
      </el-button>
      <el-button
        v-if="formDataPost.length"
        type="primary"
        @click="handlePlus()"
      >
        <el-icon><el-icon-plus /></el-icon>
      </el-button>
      <el-button type="danger" v-if="deleteAll" @click="handleDeleteAll()">
        <el-icon><el-icon-delete /></el-icon>
      </el-button>
    </div>
  </div>

  <!-- 表格 -->
  <el-table
    ref="tableRef"
    :data="tableData"
    stripe
    style="width: 100%; margin: 10px 0"
  >
    <el-table-column type="selection" v-if="deleteAll" />
    <el-table-column
      v-for="(item, index) in tableLabel"
      :key="index"
      :prop="item"
      :label="mapLabel[item] || item"
    />

    <el-table-column
      prop="address"
      label="操作"
      width="200px"
      v-if="formDataGet.length || formDataPut.length || deleteButton"
    >
      <template #default="scope">
        <el-button
          v-if="formDataGet.length"
          size="small"
          type="primary"
          @click="handleShow(scope.$index, scope.row)"
          >查看</el-button
        >
        <el-button
          v-if="formDataPut.length"
          size="small"
          type="warning"
          @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="danger"
          v-if="deleteButton"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <div style="display: flex; justify-content: center">
    <el-pagination
      background
      hide-on-single-page
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :currentPage="currentPage"
      @current-change="changePage"
    />
  </div>

  <!-- 对话框 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle">
    <el-form :model="dialogFormData" label-width="120px">
      <el-form-item
        v-for="(value, key, index) in dialogFormData"
        :key="index"
        :label="mapLabel[key] || key"
      >
        <el-input
          v-model="dialogFormData[key]"
          :disabled="dialogTitle === '查看'"
        />
      </el-form-item>
      <el-form-item v-if="dialogTitle === '添加'">
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </el-form-item>
      <el-form-item v-else-if="dialogTitle === '编辑'">
        <el-button type="primary" @click="handleEditConfirm">修改 </el-button>
        <el-button type="default" @click="dialogVisible = false">
          取消
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped>
.query-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.query-container .query-input {
  width: 200px;
  margin-right: 10px;
}
</style>